<template>
	<view>
		<view class="bg-white">
			<cu-custom bgColor="bg-gradual-write" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">我的账户</block>
			</cu-custom>
		</view>
		<view class="bg-white margin-lr-lg radius-lg">
			<view class="margin-top-lg">
				<view>
					<u--text :bold="false" size="28" color="grey" text="总余额" align="center" />
				</view>
				<view class="margin-top-lg flex justify-center">
					<image src="/other_pages/static/account.png" mode="aspectFit"></image>
				</view>
				<view class="margin-top-lg flex justify-center align-center" style="width: 100%;">
					<view>
						<u--text :bold="true" size="40" color="grey" :text="balance" align="right" />
					</view>
					<view class="margin-left-xs">
						<u--text :bold="true" size="26" color="grey" text="点" align="left" />
					</view>
				</view>
			</view>
		</view>
		<view class="margin-top-lg padding-lr-lg">
			<view>
				<u-button color="orange" size="large" @click="toRecharge" text="立即充值"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		computed: {
			balance() {
				return this.$store.state.user.balance
			}
		},
		methods: {
			toRecharge() {
				uni.navigateTo({
					url: "/other_pages/recharge/recharge"
				})
			}
		},
		onShow() {}
	}
</script>

<style lang="scss">
	.foot-button {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 40rpx;
	}
</style>